<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Comic : Ruthsarian Layout</title>
		<style type="text/css">
		<!--
			@import url(css/comic_layout.css);
		-->
		</style>
		<link rel="stylesheet" href="css/comic_layout_print.css" media="print">

		<link rel="alternate stylesheet" title="blue : color" href="css/theme/blue.css" media="screen">
		<link rel="alternate stylesheet" title="red : color" href="css/theme/red.css" media="screen">
		<link rel="alternate stylesheet" title="green : color" href="css/theme/green.css" media="screen">
		<link rel="alternate stylesheet" title="orange : color" href="css/theme/orange.css" media="screen">
		<link rel="alternate stylesheet" title="gray : color" href="css/theme/gray.css" media="screen">

		<link rel="alternate stylesheet" title="serif : font" href="css/theme/serif.css" media="screen">
		<link rel="alternate stylesheet" title="arial : font" href="css/theme/arial.css" media="screen">

		<link rel="alternate stylesheet" title="onecolumn : layout" href="css/theme/onecolumn.css" media="screen">

		<script type="text/javascript" src="../javascript/ruthsarian_utilities.js"></script>
		<script type="text/javascript">
		<!--
			var font_sizes = new Array( 100, 80, 120 ); 
			var current_font_size = 0;
			if ( ( typeof( setActiveStyleSheet ) ).toLowerCase() != 'undefined' ) { 
				setActiveStyleSheet( getPreferredStylesheet( 'color' ) , 'color' ); 
				setActiveStyleSheet( getPreferredStylesheet( 'font' ) , 'font' ); 
				setActiveStyleSheet( getPreferredStylesheet( 'layout' ) , 'layout' ); 
			}
			if ( ( typeof( loadFontSize ) ).toLowerCase() != 'undefined' ) { event_attach( 'onload' , loadFontSize ); }
			if ( ( typeof( set_width_limits ) ).toLowerCase() != 'undefined' ) { set_width_limits( 'sleeve' , 600, 999 ); }
			if ( ( typeof( sfHover ) ).toLowerCase() != 'undefined' ) { event_attach( 'onload' , function () { 
				sfHover( 'main-menu' );
			} ); }
		//-->
		</script>
	</head>
	<body>

		<div id="sleeve">
			<div id="book">
				<div id="masthead">

<div class="two-columns">
	<div class="tc-left-column">

<h1>Ruthsarian Layouts</h1>
<h2>Comic</h2>

	</div>
	<div class="tc-right-column tc-right-align">
	
<form action="http://www.google.com/search" class="print-hide">
	<input maxlength="2048" name="q" size="20" title="Google Search" value="">
	<input value="Search" type="submit">
</form>

	</div>
	<div class="clear"></div>
</div>

				</div>
				<div id="main-menu" class="clearfix rMenu-center">
					<hr class="hide">

<ul class="clearfix rMenu-hor rMenu"
	><li><a href="http://webhost.bridgew.edu/etribou/">Home</a></li
	><li class="rMenu-expand"
		><a href="http://webhost.bridgew.edu/etribou/layouts/">Layouts</a
		> <ul class="rMenu-ver"
			><li><a href="http://webhost.bridgew.edu/etribou/layouts/comic/">Comic</a></li
			><li><a href="http://webhost.bridgew.edu/etribou/layouts/rmenu/">Ruthsarian Menus</a></li
			><li><a href="http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/">Skidoo Redux</a></li
			><li><a href="http://webhost.bridgew.edu/etribou/layouts/tank!/">Tank!</a></li
			><li><a href="http://webhost.bridgew.edu/etribou/layouts/skidoo_too/gargoyles/">Gargoyles</a></li
		> </ul
	></li
	><li><a href="http://webhost.bridgew.edu/etribou/software/">Labs</a></li
	><li><a href="http://weblog.bridgew.edu/ruthsarian/">Blog</a></li
	><li><a href="mailto:ruthsarian@gmail.com">Contact</a></li
> </ul>

				</div>
				<div id="binding">
					<div id="page">
						<hr class="hide">
						<div class="panel">

<h3>About The layout</h3>
<p>
	Two column layout (can be reduced to one, could be thought of as
	three if you count the vertical toolbox on the right) that provides
	simple presentation with extensive customization; not
	just for the developer, but for the user. The toolbox showcases the
	power of stylesheet switching. Users can pick their own color, font
	type, font size, and even dictate what style of layout they view
	your web page in. Navigation is kept brief and easily accessible
	at the top of the page, allowing for a wider area in the 
	content region. A min/max width allows you to control your layout,
	but remain flexible for low resolution users.
</p>

						</div>
						<div id="left-column">
							<div class="panel">

<h3>Purpose Of The Layout</h3>
<p>
	Web page navigation. It's a key component of any web site. Perhaps
	the most common form of navigation is the list. Typically this
	list comes in the form of a vertical list on the left-hand side
	of the web page. This is done for a few reasons, most important of which
	is the (theoretically) infinite amount of vertical space available to
	the developer. Vertical scrolling is well accepted by web users so
	building a vertical list makes sense. A horizontal list might require
	the user to scroll horizontally, not something they're probably use to.
</p>
<p>
	But there's a problem with this!
</p>
<p>
	Horizontal real estate is very valuable. Our vertical navigation could wind up consuming
	nearly one-fourth of our vertical space. On very narrow viewports it might go up to as much
	as one-half. This is bad. Why? Your content is spread out vertically. Now the user has to scroll 
	just to read a single paragraph. Usability of your website has gone from "typical" to 
	"annoying". 
</p>
<p>
	How can we fix this? Simple, get rid of the vertical navigation element.
</p>
<p>
	How? Well think of Windows, specifically the start button. One button to access all the content
	on your computer. Can we do something similar for websites? Absolutely! And that's what we're doing 
	here. The key is the horizontal menu up above. It should be limited to no more than 5 or 6
	menu items. None of the items should be very long in length. The long, complext menu items
	should come underneath as a drop-down menu.
</p>

							</div>
							<div class="panel">

<h3>Tricks To The Layout</h3>
<p>
	Things you've seen before simplified and reworked for better efficiency. A narrow right-hand
	toolbar is used to place various bits that users may find useful. For example the dynamic font-size
	buttons which will resize the text within the layout. The colored square buttons provide
	a quick means for users to customize the layout to their liking. But it need not rely just be
	colors! You might include stylesheets that change the font type or width of the columns, perhaps
	even hide the right column entirely! The style switcher provides you with an endless array of 
	options.
</p>

							</div>
							<div class="panel">

<div class="two-columns tc-border">
	<div class="tc-left-column">
		<div class="tc-panel">

	<h3>No Column Backgrounds?</h3>
	<p>
		A highlight of past layouts found here, but not in this one! There is no background color to 
		give a visual definition of columns through the full height of the page. The reason for this: 
		keep the layout simple. None of this "inside-container" "outside-container" nonsense. It just
		clutters things up and creates more places for browsers to break the layout. It should
		also prove easier to manage for the novice web developer. (Although the CSS is sure to give
		you headaches.)
	</p>

		</div>
	</div>
	<div class="tc-right-column">
		<div class="tc-panel">
	
<h3>Panels</h3>
<p>
	You probably have already noticed that I've placed each section of this column 
	into its own block. In fact the right column can be done up the same way. It's
	a bit blogish in style, but that does seem to be the "in-thing" these days. 
	However you need not go to such lengths. One block in each column will surely 
	suffice. It's yet another option you have in managing the design of the layout.
</p>

		</div>
	</div>
	<div class="clear"></div>
</div>

							</div>
							<div class="panel">

<h3>Caveats</h3>
<p>
	Like most layouts there are a few "issues" worth mentioning. The most 
	important with this (and most other layouts of mine) is that dropdown menus
	like the one used in this layout <strong>are not accessible to most
	screen readers</strong>. I'm specifically covering this problem here
	because this layout is designed to heavily rely on those
	dropdown menus. It allows the horizontal menu up at the top
	to be the only navigational element on the entire page. It allows
	you a deep menu system without cluttering up the web page, leaving
	more room for content. This is a key feature and a key problem with
	the layout. As a result <strong>you must assume not every user will
	have access to the dropdown menus</strong>. This means each top-level
	menu should link to a separate page which contains the same links 
	as those found in the second level (and beyond) of your menu
	system. Otherwise you wind up blocking some users from
	accessing the full content of your web site.
</p>
<p>
	The themes created for this layout are extremely basic. Even if you're
	new to CSS I would strongly suggest you take the time to tweak the 
	themes a bit to make them more presentable.
</p>
<p>
	It should be obvious, but just to drive home the point; those
	items in the toolbox are all driven by javascript. If a user
	does not support javascript then that area becomes completely
	useless. It doesn't take up a lot of space, the functionality
	is not critical to using the web site (at least as I've
	designed it) so I do not consider this a big issue. However,
	should you add style swtich buttons which enable or hide
	certain page elements that contain content you must first
	ask yourself, "If a user can't use that button will they
	miss something important?"
</p>


							</div>
						</div>
						<div id="right-column">
							<div class="panel">

<h3>The Gargoyles Comic</h3>
<p>
	As with all of my layouts I must include a shameless plug
	for <a href="http://en.wikipedia.org/wiki/Gargoyles_%28TV_series%29"><em>Gargoyles</em></a>; 
	An animated television series produced
	by Disney back in the mid 1990s. It's drawn a cult following
	that's lasted for the last 15 years and will continue into
	the foreseeable future. 
</p>
<p>
	So strong is the fan base that Disney opened up the property
	after 10 years so that comic books about the series could be produced.
	Not just any comics either. These comics are written by co-creator
	<a href="http://en.wikipedia.org/wiki/Greg_Weisman">Greg Weisman</a>. 
	The comic picks up just after the end of
	season two and contain all new stories including an exciting story
	arc in which the breadth of the Gargoyles universe is expanded as we
	learn of the existence of new clans!
</p>
<p>
	The first six issues of <em>Gargoyles</em> have been published as a trade 
	paperback for your convienence. You can pick up the TPB as well as current
	issues of the book from the <a href="http://www.slgcomic.com/category-exec/category_id/19/nm/Disney_Comics">the
	publisher's web site</a> or through <a href="http://www.amazon.com/Gargoyles-Clan-Building-1/dp/1593620969/">amazon.com</a>.
</p>
<p>
	The comic has already proven successful enough to warrant it's first spin-off, 
	a six-issue miniseries titled <em>Bad Guys</em>. In this series several of
	the villians within the <em>Gargoyles</em> universe are forced to work together
	as a sort of penance for their past crimes. The comic is available for purchase
	online through the 
	<a href="http://www.slgcomic.com/product-exec/product_id/630/nm/Gargoyles_Bad_Guys_1">publisher's 
	web site</a>.
</p>
<p>
	Each comic is produced on a bi-monthly schedule opposite one another. That means there's
	a brand new <em>Gargoyles</em> comic every month! 
</p>
<p>
	If you're a fan of the series this is a can't miss. If you're not a fan, but would like
	to support my work I'd humbly ask that you pick up a copy of the comic. Who knows, you
	may just find yourself enjoying it!
</p>

							</div>
							<div class="panel">

<h3>Compatibility</h3>
<p>
	Confirmed to work with Win/IE 5.5 and later (should work in 5.0, but not confirmed),
	Firefox 2, Safari 3, Opera 9, iCab 3.02 and later, Mac/IE 5, Netscape 6 and later
</p>
<p>
	Old browsers (IE version 4 or earlier, Netscape 4 or earlier) should only see
	a text-based page which, while not the prettiest option, is still entirely
	usable.
</p>

							</div>
							<div class="panel">

<h3>Download</h3>
<p>
	Like other layouts, there is <a href="../download/comic.zip">a 
	ZIP available for download here</a> will give you everything 
	you need to start using this layout. 
</p>
<p>
	If you're new to CSS I suggest opening up the stylesheets
	and playing around with various rules and values to get a 
	feel for how the layout works and what bits of CSS do what. 
	Figuring things out in this manner will help both learn CSS
	and become proficient in solving compatibility issues with
	this and future layouts you develop yourself.
</p>

							</div>
						</div>
						<div class="clear"></div>
					</div>
					<div id="toolbox">
						<div class="panel">

<noscript>
	<p summary="Javascript Required.">
		J<br>
		A<br>
		V<br>
		A<br>
		S<br>
		C<br>
		R<br>
		I<br>
		P<br>
		T<br>
		<br>
		R<br>
		E<br>
		Q<br>
		U<br>
		I<br>
		R<br>
		E<br>
		D
	</p>
</noscript>

<p class="fontsize-set">
	<big><input type="button" onclick="setFontSize(2); return false;"
		value="A" alt="L" title="Large Font"></big><br>
	<input type="button" onclick="setFontSize(0); return false;"
		value="A" alt="M" title="Medium Font"><br>
	<small><input type="button" onclick="setFontSize(1); return false;"
		value="A" alt="S" title="Small Font"></small>
</p>

<p class="theme-picker">
	<input type="button" value="" class="default"  title="default"
		onclick="setActiveStyleSheet( 'default' , 'color' ); return false;"><br>
	<input type="button" value="" class="blue"  title="blue"
		onclick="setActiveStyleSheet( 'blue' , 'color' ); return false;"><br>
	<input type="button" value="" class="red"  title="red"
		onclick="setActiveStyleSheet( 'red' , 'color' ); return false;"><br>
	<input type="button" value="" class="green"  title="green"
		onclick="setActiveStyleSheet( 'green' , 'color' ); return false;"><br>
	<input type="button" value="" class="orange"  title="orange"
		onclick="setActiveStyleSheet( 'orange' , 'color' ); return false;"><br>
	<input type="button" value="" class="gray"  title="gray"
		onclick="setActiveStyleSheet( 'gray' , 'color' ); return false;"><br>
</p>

<p class="theme-picker">
	<input type="button" value="Ff" title="Set font to Calibri." style="font-family: Calibri, sans-serif;"
		onclick="setActiveStyleSheet( 'default' , 'font' ); return false;"><br>
	<input type="button" value="Ff" title="Set font to Arial." style="font-family: Arial, sans-serif;"
		onclick="setActiveStyleSheet( 'arial' , 'font' ); return false;"><br>
	<input type="button" value="Ff" title="Set font to Serif." style="font-family: 'Times New Roman', serif;"
		onclick="setActiveStyleSheet( 'serif' , 'font' ); return false;"><br>
</p>

<p class="theme-picker">
	<input type="button" value="2" title="Two Columns"
		onclick="setActiveStyleSheet( 'default' , 'layout' ); return false;"><br>
	<input type="button" value="1" title="One Column"
		onclick="setActiveStyleSheet( 'onecolumn' , 'layout' ); return false;"><br>
</p>


						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div id="footer">
					<hr class="hide">

<p>
	All HTML/CSS is released into the public domain. 
</p>

				</div>
			</div>
		</div>
	</body>
</html>
